<template>
    <div style="display: inline-block; width:150px;">
        <div ref="eHeader" role="tablist" class="ag-tabs-header ag-menu-header"><span role="tab" tabindex="-1"
                class="ag-tab ag-tab-selected" aria-label="filter"><span class="ag-icon ag-icon-filter" unselectable="on"
                    role="presentation"></span></span></div>
        <a-checkbox-group @change="updateFilter" direction="vertical" v-model="listData">
            <a-checkbox v-for="item in AllDataList" :value="item">{{ item }}</a-checkbox>
        </a-checkbox-group>
    </div>
</template>
  
<script lang="ts">
import { ref,watch } from 'vue'
export default {
    setup(props: any) {
            const listData: any = ref(Array.from(new Set(props.params.column.gridOptionsWrapper.gridOptions.rowData.map((res: any) => {
              return res[props.params.datavalue()]
            }))))
            const updateFilter = () => {
              props.params.filterChangedCallback()
            }
            const doesFilterPass = (params: any) => {
              for (let i = 0; i < listData.value.length; i++) {
                if (params.data[props.params.datavalue()] == listData.value[i]) {
                  return true
                }
              }
            }

            const isFilterActive = () => {
              return true
            }
            const AllDataList: any = ref(Array.from(new Set(props.params.column.gridOptionsWrapper.gridOptions.rowData.map((res: any) => {
              return res[props.params.datavalue()]
            }))))
            watch( ()=>props.params.dataListValue(), () => {
              AllDataList.value = Array.from(new Set(props.params.column.gridOptionsWrapper.gridOptions.rowData.map((res: any) => {
                return res[props.params.datavalue()]
              })))
              listData.value = Array.from(new Set(props.params.column.gridOptionsWrapper.gridOptions.rowData.map((res: any) => {
                return res[props.params.datavalue()]
              })))
              props.params.filterChangedCallback()
            })
            return {
              updateFilter,
              doesFilterPass,
              isFilterActive,
              listData,
              AllDataList
            }
          }
}

</script>
  